import React from 'react';
import './clientbase2.less';
import * as echarts from 'echarts';

import Chartlist from './mychartslist4';
import { DatePicker, Select } from 'antd';
import { useState } from 'react';
import { useEffect } from 'react';
// const { Option } = Select;
export default function clientBase() {
  const [myheight, setheight] = useState(500);
  const [mywidth, setwidth] = useState(700);
  const [chartstype, setchartstype] = useState('2');
  //颜色对象
  function Colors() {
    let r = Math.floor(Math.random() * 255);
    let g = Math.floor(Math.random() * 255);
    let b = Math.floor(Math.random() * 255);
    let color = 'rgb(' + r + ',' + g + ',' + b + ')';
    return color;
  }
  const zhexianoption = {
    legend: {
      show: false,
    },
    xAxis: {
      type: 'category',
      data: [
        '汽车制造商',
        '分销商',
        '加盟商',
        '零售商',
        '医院',
        '其他医疗机构',
        '医疗设备生产商',
        '土建工程公司',
        '安装工程公司',
        '工程设备贸易公司',
        '连锁商超',
        '食品贸易公司',
        '代理商',
        '直接客户',
        '电子产品制造商',
        '食品生产公司',
      ],
    },
    yAxis: {
      type: 'value',
      name: '客户数量',
    },
    series: [
      {
        data: [12, 5, 22, 13, 8, 5, 6, 21, 14, 12, 13, 10, 8, 8, 10, 8],
        type: 'line',
        itemStyle: {
          normal: {
            color: Colors(), //改变折线点的颜色
            lineStyle: {
              color: 'red', //改变折线颜色
            },
          },
        },
      },
    ],
  };
  const ldoption = {
    color: ['#e67e22', '#e74c3c', '#1abc9c', '#3498db', '#34495e'],
    tooltip: {
      //弹窗信息
      trigger: 'item',
      formatter: '{a} <br/>{b} : {d}%',
    },
    series: [
      {
        name: '漏斗图',
        type: 'funnel',
        left: '10%',
        top: 40,
        //x2: 80,
        // bottom: 0,
        width: '100%',
        height: '85%',
        min: 0,
        max: 100,
        minSize: '10%', //与漏斗形状有关
        maxSize: '100%', //与漏斗形状有关
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b|{b}}' + '{b|:}' + '{a|{d}}%',
          rich: {
            a: {
              color: 'black',
              fontSize: 8,
            },
            b: {
              color: 'black',
              fontSize: 8,
            },
          },
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid',
          },
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
        },
        emphasis: {
          label: {
            fontSize: 20,
          },
        },
        data: [
          { value: 12, name: '汽车制造商' },
          { value: 5, name: '分销商' },
          { value: 22, name: '加盟商' },
          { value: 13, name: '零售商' },
          { value: 9, name: '医院' },
          { value: 5, name: '其他医疗机构' },
          { value: 6, name: '医疗设备生产商' },
          { value: 21, name: '土建工程公司' },
          { value: 14, name: '安装工程公司' },
          { value: 12, name: '工程设备贸易公司' },
          { value: 13, name: '连锁商超' },
          { value: 10, name: '食品贸易公司' },
          { value: 8, name: '代理商' },
          { value: 8, name: '直接客户' },
          { value: 10, name: '电子产品制造商' },
          { value: 8, name: '食品生产公司' },
        ],
      },
    ],
  };
  const baroption = {
    legend: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '汽车制造商',
          '分销商',
          '加盟商',
          '零售商',
          '医院',
          '其他医疗机构',
          '医疗设备生产商',
          '土建工程公司',
          '安装工程公司',
          '工程设备贸易公司',
          '连锁商超',
          '食品贸易公司',
          '代理商',
          '直接客户',
          '电子产品制造商',
          '食品生产公司',
        ],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        name: '客户数量',
        type: 'value',
      },
    ],
    series: [
      {
        label: {
          show: true,
          position: 'top',
        },
        name: 'Direct',
        type: 'bar',
        data: [
          { value: 12, itemStyle: { color: Colors() } },
          { value: 5, itemStyle: { color: Colors() } },
          { value: 22, itemStyle: { color: Colors() } },
          { value: 13, itemStyle: { color: Colors() } },
          { value: 8, itemStyle: { color: Colors() } },
          { value: 6, itemStyle: { color: Colors() } },
          { value: 6, itemStyle: { color: Colors() } },
          { value: 21, itemStyle: { color: Colors() } },
          { value: 14, itemStyle: { color: Colors() } },
          { value: 12, itemStyle: { color: Colors() } },
          { value: 13, itemStyle: { color: Colors() } },
          { value: 10, itemStyle: { color: Colors() } },
          { value: 8, itemStyle: { color: Colors() } },
          { value: 8, itemStyle: { color: Colors() } },
          { value: 10, itemStyle: { color: Colors() } },
          { value: 8, itemStyle: { color: Colors() } },
        ],
        // itemStyle: {
        //   normal: {
        //     //这里设置每个柱子颜色不一样
        //     // color: function (params) {
        //     //   // 定义一个颜色数组colorList

        //     //   var colorList = [
        //     //     // '#26c0c0',
        //     //     // '#b5c334',
        //     //     // '#fe8463',
        //     //     // '#fe8463',
        //     //     // '#9bca63',
        //     //   ];
        //     //   colorList.push(Colors());
        //     //   if (colorList[params.dataIndex] == undefined) {
        //     //     return '#9bca63';
        //     //   }
        //     //   return colorList[params.dataIndex];
        //     //   // console.log(colorList[params.dataIndex],99);
        //     // },

        //   },
        // },

        //柱状图宽度
        barWidth: '43%',
      },
    ],
  };
  const pieoption = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: '5%',
    },
    series: [
      {
        name: '客户数量',
        type: 'pie',
        radius: ['85%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderWidth: 0,
        },
        label: {
          show: true,
          position: 'center',
          normal: {
            // 各分区的提示内容
            // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
            formatter: function (params) {
              return params.name;
            },
            textStyle: {
              // 提示文字的样式
              color: '#595959',
              fontSize: 14,
            },
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 12, name: '汽车制造商' },
          { value: 5, name: '分销商' },
          { value: 22, name: '加盟商' },
          { value: 13, name: '零售商' },
          { value: 8, name: '医院' },
          { value: 5, name: '其他医疗机构' },
          { value: 6, name: '医疗设备生产商' },
          { value: 21, name: '土建工程公司' },
          { value: 14, name: '安装工程公司' },
          { value: 12, name: '工程设备贸易公司' },
          { value: 13, name: '连锁商超' },
          { value: 10, name: '食品贸易公司' },
          { value: 8, name: '代理商' },
          { value: 8, name: '直接客户' },
          { value: 10, name: '电子产品制造商' },
          { value: 8, name: '食品生产公司' },
        ],
      },
    ],
  };

  useEffect(() => {
    // echartref.props.style.height=myheight
    let dom = document.querySelector('.myecharts');
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(dom);
    // 使用刚指定的配置项和数据显示图表。
    let myoption = pieoption;
    if (chartstype == 1) {
      myoption = zhexianoption;
    } else if (chartstype == 2) {
      myoption = baroption;
    } else if (chartstype == 3) {
      myoption = pieoption;
    } else {
      myoption = ldoption;
    }
    myChart.getDom().style.height = myheight + 'px';
    myChart.getDom().style.width = mywidth + 'px';
    myChart.resize();
    myChart.setOption(myoption, true);
  }, [chartstype, myheight, mywidth]);

  const [currentindex, setcurrentindex] = useState(2);
  const options = [];
  for (let i = 10; i < 36; i++) {
    options.push({
      value: i.toString(36) + i,
      label: i.toString(36) + i,
    });
  }
  const echartwidth = [
    {
      value: '500',
      label: '500',
    },
    {
      value: '600',
      label: '600',
    },
    {
      value: '700',
      label: '700',
    },
    {
      value: '800',
      label: '800',
    },
    {
      value: '900',
      label: '900',
    },
    {
      value: '1000',
      label: '1000',
    },
    {
      value: '1100',
      label: '1100',
    },
    {
      value: '1200',
      label: '1200',
    },
    {
      value: '1400',
      label: '1400',
    },
    {
      value: '1600',
      label: '1600',
    },
    {
      value: '1800',
      label: '1800',
    },
    {
      value: '2000',
      label: '2000',
    },
    {
      value: '2500',
      label: '2500',
    },
    {
      value: '3000',
      label: '3000',
    },
    {
      value: '自适应高度',
      label: '自适应高度',
    },
  ];
  const echarttype = [
    {
      value: '1',
      label: '折线图',
    },
    {
      value: '2',
      label: '柱状图',
    },
    {
      value: '3',
      label: '饼状图',
    },
    {
      value: '4',
      label: '漏斗图',
    },
  ];
  const handleChange = (value) => {
    console.log(`Selected: ${value}`);
  };
  const changechartheight = (value) => {
    setheight(value);
  };
  const changechartwidth = (value) => {
    setwidth(value);
  };
  const changecharttype = (value) => {
    setchartstype(value);
  };
  function clickdatatable(e) {
    console.log(e.currentTarget.id);
    setcurrentindex(e.currentTarget.id);
  }

  return (
    <div className="client">
      <div className="clientheader">
        <div className="lbtn4">
          <button>过滤</button>
          <button>还原</button>
          <button>打印</button>
          <button>查看日志</button>
          <button>导出</button>
        </div>

        <div className="rbtn2">
          <button
            className={currentindex == 1 ? 'clickrbtn2btn' : 'rbtn2btn'}
            id="1"
            onClick={(e) => clickdatatable(e)}
          >
            数据报表
          </button>
          <button
            className={currentindex == 2 ? 'clickrbtn2btn' : 'rbtn2btn'}
            id="2"
            onClick={(e) => clickdatatable(e)}
          >
            图形报表
          </button>
        </div>
      </div>
      <div className="clientcontent">
        <label>客户行业：</label>
        <Select
          size="middle"
          defaultValue="全部"
          onChange={handleChange}
          style={{
            width: 200,

            marginRight: 30,
          }}
          options={options}
        />

        <label>客户分类:</label>
        <Select
          size="middle"
          defaultValue="全部"
          onChange={handleChange}
          style={{
            width: 200,
            marginRight: 30,
          }}
          options={options}
        />

        <label>价值评估：</label>
        <Select
          size="middle"
          defaultValue="全部"
          onChange={handleChange}
          style={{
            width: 200,
            marginRight: 30,
          }}
          options={options}
        />

        <label>添加时间：</label>
        <DatePicker.RangePicker
          style={{
            width: 450,
            marginRight: 30,
          }}
        />
        <button className="searchbtn">查询</button>

        <div className="clientmain">
          <p>客户来源统计</p>
          <div
            className="clientecharts"
            style={{ display: currentindex == 2 ? 'block' : 'none' }}
          >
            <div style={{ width: '60%', height: '100%' }}>
              <label>图表类型：</label>
              <Select
                size="middle"
                defaultValue="柱状图"
                onChange={changecharttype}
                style={{
                  width: 100,
                  borderRadius: '3px',
                  marginRight: 20,
                }}
                options={echarttype}
              />
              <label>图表宽度：</label>
              <Select
                size="middle"
                defaultValue="1200"
                onChange={changechartwidth}
                style={{
                  width: 100,
                  borderRadius: '3px',
                  marginRight: 20,
                }}
                options={echartwidth}
              />
              <label>图表高度：</label>
              <Select
                size="middle"
                defaultValue="800"
                onChange={changechartheight}
                style={{
                  width: 100,
                  borderRadius: '5px',
                  marginRight: 20,
                }}
                options={echartwidth}
              />
              <div className="myecharts" style={{ height: 500 }}></div>

              {/* <ReactEcharts option={getOption()} ref={(e) => {echartref = e; }} style={{height:myheight}} /> */}
            </div>
          </div>
          <div
            className="clientable"
            style={{ display: currentindex == 1 ? 'block' : 'none' }}
          >
            {<Chartlist />}
          </div>
        </div>
      </div>
    </div>
  );
}
